<template>
  <!-- 某个 cient 的路径选择器 -->
    <!-- 添加和编辑弹窗 -->
    <n-modal
      v-model:show="showSelectorModal"
      preset="dialog"
      :bordered="false"
      :segmented="{content: 'soft', footer: 'soft'}"
      :show-icon="false"
      :maskClosable="false"
      :style="{ width: '40em' }"
      >
      <n-scrollbar style="height:40em" :trigger="'hover'" >
        <client-path ref="selectorRef" @selected="handleSelected"></client-path>
      </n-scrollbar>

      <div style="display: flex; justify-content: flex-end">
        <n-button round type="info" size="small" style="margin-right:4px" @click="choosedFile()" >
          选择
        </n-button>
        <n-button round type="warning" size="small" @click="close()" >
          关闭
        </n-button>
      </div>
    </n-modal>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import clientPath from './client-path.vue'

const showSelectorModal = ref(false)
const selectorRef = ref(null)
const emit = defineEmits([ "selected" ])

const show = (id, path) => {
  showSelectorModal.value = true
  nextTick(() => {
    selectorRef.value.show(id, path) 
  })
}
const close = () => {
  showSelectorModal.value = false
  selectorRef.value.clear()
}

const choosedFile = () => {
  let fileInfo = selectorRef.value.getChoosed()
  emit("selected", fileInfo)
  close()
}

const handleSelected = () => {
  close()
}

defineExpose({
  show, close,
})

</script>

<style scoped lang="scss">
</style>
